<template>
	<div class="mar-l-10 mar-r-15 mar-t-20">
		<div class="flex flex-wrap justify-between">
			<div class="w-23 h-150 shadow-type-7 border-rad-5">
				<div class="flex align-center mar-l-10 mar-r-10 mar-t-10">
					<i class="w-px-8 h-8 dis-block bg-409eff radius-50 mar-r-10"></i>
					<span>在线学习总人数</span>
				</div>

				<div class="mar-l-10 mar-r-10 mar-t-30">
					<div class="mar-b-10">
						<span class="font-18 font-b-800">225</span>
						<span class="font-mini color-999999 mar-l-5">人</span>
					</div>

					<el-progress :text-inside="true" :show-text="false" :stroke-width="15" :percentage="20"></el-progress>
				</div>
			</div>

			<div class="w-23 h-150 shadow-type-7 border-rad-5">
				<div class="flex align-center mar-l-10 mar-r-10 mar-t-10">
					<i class="w-px-8 h-8 dis-block bg-67c23a radius-50 mar-r-10"></i>
					<span>完成交易订单总数</span>
				</div>

				<div class="mar-l-10 mar-r-10 mar-t-30">
					<div class="mar-b-10">
						<span class="font-mini color-999999 mar-r-5">已交易</span>
						<span class="font-18 font-b-800">325</span>
						<span class="font-mini color-999999 mar-l-5">条订单</span>
					</div>

					<el-progress :text-inside="true" :show-text="false" :stroke-width="15" :percentage="20" status="success"></el-progress>
				</div>
			</div>

			<div class="w-23 h-150 shadow-type-7 border-rad-5">
				<div class="flex align-center mar-l-10 mar-r-10 mar-t-10">
					<i class="w-px-8 h-8 dis-block bg-409eff radius-50 mar-r-10"></i>
					<span>课程概况：</span>
				</div>

				<div class="mar-l-10 mar-r-10 mar-t-30 flex justify-between">
					<div class="text-center">
						<span class="dis-block color-999999">总课程</span>
						<span class="dis-block mar-t-10 font-b-800">22</span>
					</div>

					<div class="text-center">
						<span class="dis-block color-999999">已上架课程</span>
						<span class="dis-block mar-t-10 font-b-800 color-1e9fff">20</span>
					</div>

					<div class="text-center">
						<span class="dis-block color-999999">已下架课程</span>
						<span class="dis-block mar-t-10 font-b-800 color-ff0000">2</span>
					</div>
				</div>
			</div>

			<div class="w-23 h-150 shadow-type-7 border-rad-5 pos-r">
				<div class="flex align-center mar-l-10 mar-r-10 mar-t-10">
					<i class="w-px-8 h-8 dis-block bg-409eff radius-50 mar-r-10"></i>
					<span>当前收入</span>
				</div>

				<div class="mar-l-10 mar-r-10 mar-t-30">
					<span class="font-14 color-999999">￥</span>
					<span class="font-20 color-ff0000 font-b-800 mar-r-5">5299.00</span>
					<span class="font-14 color-999999">元</span>
				</div>

				<div class="w-100 h-30 line-h-30 bg-fffee4 pos-a b-10">
					<span class="font-mini mar-l-10 color-ff0000">注：此收入为您所有课程被购买后的总收入！</span>
				</div>
			</div>
		</div>

		<div class="flex justify-between mar-t-30">
			<div style="width: 72%;height: 450px;" class="shadow-type-7 border-rad-5">
				<div id="courseSaleSituation" class="mar-l-20 mar-r-20 mar-t-20" style="height: 400px;"></div>
			</div>

			<div style="width: 26%;height: 450px;" class="shadow-type-7 border-rad-5">
				<div class="mar-t-20 mar-l-10 mar-r-10">
					<div>
						<span class="font-b-800">系统监控</span>
					</div>

					<ul>
						<li class="mar-t-10 flex align-center">
							<i :class="(monitor.webSocketConnect ? 'bg-67c23a' : 'bg-ff0000') + ' w-px-8 h-8 dis-block radius-50 mar-r-10'"></i>
							<span>WebSocket 连接：</span>
							<span class="color-1f8a24" v-if="monitor.webSocketConnect">正常</span>
							<span class="color-ff0000" v-else>断开</span>
						</li>

						<li class="mar-t-10 flex align-center">
							<i class="w-px-8 h-8 dis-block bg-99a6c4 radius-50 mar-r-10"></i>
							<span>当前开发环境：</span>
							<span class="color-333333">{{monitor.devEnvironment}}</span>
						</li>

						<li class="mar-t-10 flex align-center">
							<i :class="(monitor.databaseConnect ? 'bg-67c23a' : 'bg-ff0000') + ' w-px-8 h-8 dis-block radius-50 mar-r-10'"></i>
							<span>数据库连接：</span>
							<span class="color-1f8a24" v-if="monitor.databaseConnect">正常</span>
							<span class="color-ff0000" v-else>断开</span>
						</li>

						<li class="mar-t-10 flex align-center">
							<i class="bg-67c23a w-px-8 h-8 dis-block radius-50 mar-r-10"></i>
							<span>静态资源空间：</span>
							<span class="color-ff0000">{{monitor.staticSpace.use}}</span>
							<span style="margin: 0 5px;">/</span>
							<span class="color-1f8a24">{{monitor.staticSpace.count}}</span>
						</li>
					</ul>

					<div style="height: 300px;">
						<dv-charts :option="datavOption" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		name: "Home",
		data () {
			return {
				// 监控
				monitor: {
					webSocketConnect: false,
					devEnvironment: "Node + Vue + Mongodb",
					databaseConnect: false,
					staticSpace: {
						count: "4T",
						use: "500MB"
					},
				},
				
				// 仪表盘配置
				datavOption: {
					title: {
						text: '服务器内存监控',
						style: {
							fill: '#333'
						}
					},

					series: [
						{
							type: 'gauge',
							data: [ { name: 'itemA', value: 25 } ],
							center: ['50%', '55%'],
							axisLabel: {
								formatter: '{value}%',
									style: {
									fill: '#333'
								}
							},

							axisTick: {
								style: {
									stroke: '#333'
								}
							},

							animationCurve: 'easeInOutBack'
						}
					]
				}
			}
		},
		
		methods: {
			// 从页面内打开页面，并且在面包屑中显示页面快捷导航入口
			// skipTestPage () {
			// 	let obj = {
			// 		name: "AddChapter",
			// 		title: "添加标签",
			// 		actived: true,
			// 		router: "/AddChapter",
			// 		meta: {
			// 			keepAlive: true
			// 		}
			// 	}
				
			// 	this.$store.commit("addTag", obj);
			// 	this.$store.commit("cache", obj);// 缓存路由
			// 	this.$router.push({
			// 		path: "/AddChapter"
			// 	})
			// },

			// 画图表
			drawTable () {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('courseSaleSituation'));
				let month = new Date().getMonth() + 1;
				let dateArr = ["2022-02-01", "2022-02-02", "2022-02-03", "2022-02-04", "2022-02-05", "2022-02-06", "2022-02-07", "2022-02-08", "2022-02-09", "2022-02-10", "2022-02-11", "2022-02-12", "2022-02-13", "2022-02-14", "2022-02-15", "2022-02-16", "2022-02-17", "2022-02-18", "2022-02-19", "2022-02-20", "2022-02-21", "2022-02-22", "2022-02-23", "2022-02-24", "2022-02-25", "2022-02-26", "2022-02-27", "2022-02-28"];

				// 绘制图表
				myChart.setOption({
					title: {
						text: `${month}月份课程购买情况`,
						fontSize: "25px"
					},

					xAxis: {
						type: 'category',
						data: dateArr
					},

					yAxis: {
						type: 'value'
					},

					series: [
						{
							name: '课程购买人数',
							data: [1, 5, 33, 120, 4, 0, 12, 45, 422, 57],
							type: 'line'
						}
					],

					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					
					tooltip: {
						trigger: 'axis'
					}
				});

				// 自适应图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			}
		},

		mounted () {
			this.drawTable();
		}
	}
</script>

<style scoped>
	@import "../../assets/css/common.css";
</style>
